<template>
	<Layout class-name="Layout hideH">
    <view class="search-box flex-lect box">
    	<u-icon name="search" color="#05B196" size="40"></u-icon>
    	<input class="input u-m-l-10" placeholder="请输入关键字" v-model="keyWords" @confirm="search(keyWords)" />
    	<view @click="search('')" style="width: 60rpx; height: 100%;" class="flex-ct">
        <u-icon v-if="keyWords !=''" name="close-circle-fill" color="#b4b4b4" size="35"></u-icon>  
      </view>
    </view>
    
    <zb-tab-group :list="tabList" v-model="tabId" @change="chooseTabId" />
    <empty :show="emptyShow" />
    <view class="shaishi-list box">
      <match-item v-for="(item, index) in list" :key="index" :item="item" :type="0" @toDetail="linkTo" />
    </view>
    <view v-if="list.length === 0" class="no-data">
      <image class="icon" src="/home/static/imgs/empty-2.png"></image>
      <view class="title">暂无数据~</view>
    </view>
  </Layout>
</template>

<script>
	export default {
		data() {
			return {
        isDelShow:false,
        tabList:[
          {name:'全部', id:''},
          {name:'攻略', id:1},
          {name:'美食', id:2},
          {name:'活动赛事', id:3},
        ],
        tabId:'',
        emptyShow:false,
        keyWords:'',
        list:[],
        page:1,
        isLast:false
			}
		},
    onLoad(e) {
      this.keyWords = e.keyWords || '';
      this.getList()
    },
    computed:{
      loading(){
        if(this.page === 1){
          return 0
        }else if(this.list.length === 0){
          return 2
        }else if(this.list.length > 0){
          return 1
        }
      },
    },
		methods: {
			search(value) {
        this.keyWords = value;
        this.page = 1;
        this.isLast = false;
        this.list = [];
        this.getList()
      },
      getList(){
        this.$api.searchListApi({searchKey: this.keyWords, type_id: this.tabId}).then(res=>{
          this.page++;
          if(!this.isLast) {
            this.list = [...this.list, ...res.data.data];
            this.isLast = false;
          }else{
            this.isLast = true;
          }
        })
      },
      chooseTabId(id){
        if(this.tabId != id) return;
        this.tabId = id;
        this.isLast = false;
        this.page = 1;
        this.list = [];
        this.getList()
      },
      linkTo(item){
        console.log('进入详情页', item)
        if(item.type_id == 1){
          uni.navigateTo({
            url:'/home/strategy_detail?type=1&id='+item.activity_id
          })
        }else if(item.type_id == 2){
          uni.navigateTo({
            url:'/home/strategy_detail?type=2&id='+item.activity_id
          })
        }else if(item.type_id == 3){
          uni.navigateTo({
            url:'/home/match/detail?id='+item.activity_id
          })
        }
      }
			
		},
    onReachBottom() {
      if(this.isLast){
        this.getList()
      }
    }
	}
</script>

<style lang="scss" scoped>

.search-box{
  height: 80rpx; border-radius: 40rpx; padding-left: 32rpx; position: relative; background-color: #F6F7F9; padding-right: 20rpx;
  .zz-bg{position: absolute; width: 100%; height: 100%; left: 0; top:0; top: 20;}
  .input{background-color: #F6F7F9; flex: 1; height: 70rpx; line-height: 70rpx;}
}

</style>
